<template>
    <!-- <div :class="kongzhidonghua?'donghua':'donghua1'"> -->
    <div >
        <van-nav-bar
            style="background-color: #EDEDED;"
            title="个人信息"
            left-arrow
            @click-left="onClickLeft"
            />
        <ul>
            <li style="width: 100%;height: 60px;background-color: #ffffff;border-bottom: 1px solid #EDEDED;">
                <p style="float: left;line-height: 60px;margin-left: 5%;">头像</p>
                <img :src="$store.state.udate.uimg" 
                style="width: 50px;
                height: 50px;
                margin-left: 55%;
                margin-top: 1.5%;
                margin-right: 1.5%;
                float: left;">
            </li>
            <li style="width: 100%;height: 60px;background-color: #ffffff;border-bottom: 1px solid #EDEDED;">
                <p style="float: left;line-height: 60px;margin-left: 5%;">名字</p>
                <p style="float: left;line-height: 60px;margin-left: 55%;">{{$store.state.udate.uname}}</p>
            </li>
            <li style="width: 100%;height: 60px;background-color: #ffffff;border-bottom: 1px solid #EDEDED;">
                <p style="float: left;line-height: 60px;margin-left: 5%;">Chats号</p>
                <p style="float: left;line-height: 60px;margin-left: 48%;">{{$store.state.udate.uaccount}}</p>
            </li>
            <li style="width: 100%;height: 60px;background-color: #ffffff;border-bottom: 1px solid #EDEDED;" @click="tuichu">
                <p style="float: left;line-height: 60px;margin-left:5%;">退出当前账号</p>
                <img src="../assets/tuichu.png" 
                style="width: 25px;
                height: 25px;
                margin-left: 39%;
                margin-top: 4%;
                margin-right: 6%;
                float: left;">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'SetIm',
    data() {
        return {
            kongzhidonghua:true
        }

    },
    methods:{
        onClickLeft(){
            // this.kongzhidonghua=false
            this.$router.push('/home/im')
            
        },
        tuichu(){
            this.$confirm('是否退出此账号！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            localStorage.clear(), 
            this.$store.state.Friendslist=null
            this.$router.push('/')
            this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消退出'
            });          
            });
        }
    }
}
</script>

<style scoped>

.donghua{
  animation: donghua 0.2s;
}
 
@keyframes donghua
{
  0% {margin-left: 390.4px;}
  
  100% {margin-left: 0px;}
}


.donghua1{
  animation: donghua1 0.2s;
}
 
@keyframes donghua1
{
  0% {margin-left:0px;}
  
  100% {margin-left: 390.4px;}
}
</style>
  